<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="snake.css">
</head>

<body>
    <script>
        //创建地图
        function SnakeMap() {

        }
        SnakeMap.prototype.show = function () {
            let divDom = document.createElement('div');
            divDom.className = 'map'
            document.body.appendChild(divDom);
        }
        let map = new SnakeMap;
        map.show();
        //食物
        function Food() {
            this.x = 0;
            this.y = 0;
            this.foodDom = null;
        }
        Food.prototype.show = function () {
            if (!this.foodDom) {
                this.foodDom = document.createElement('div');
                this.foodDom.className = 'food';
                this.foodDom.style.position = 'absolute';
                document.querySelector('.map').appendChild(this.foodDom);
            }
            this.x = this.makeRandom(15, 15);
            this.y = this.makeRandom(15, 15);
            this.foodDom.style.left = this.x * 20 + 'px';
            this.foodDom.style.top = this.y * 20 + 'px';
        }
        Food.prototype.makeRandom = function (min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min);
        }
        let food = new Food;
        food.show();
        //蛇的构造
        function Snake() {
            this.direct = 'right';
            this.bodys = [
                { x: 2, y: 0, backgroundImage: "url('imgs/head.png')", dom: null },
                { x: 1, y: 0, backgroundImage: "url('imgs/body.png')", dom: null },
                { x: 0, y: 0, backgroundImage: "url('imgs/body.png')", dom: null }
            ];
        }
        Snake.prototype.show = function () {
            for (let i = 0; i < this.bodys.length; i++) {
                if (!this.bodys[i].dom) {
                    this.bodys[i].dom = document.createElement('div');
                    this.bodys[i].dom.className = 'snake';
                    this.bodys[i].dom.style.backgroundImage = this.bodys[i].backgroundImage;
                    document.querySelector('.map').appendChild(this.bodys[i].dom)
                }
                this.bodys[i].dom.style.left = this.bodys[i].x * 20 + 'px';
                this.bodys[i].dom.style.top = this.bodys[i].y * 20 + 'px';
            }
        }
        //蛇的移动
        Snake.prototype.move = function () {
            for (let i = this.bodys.length - 1; i > 0; i--) {
                this.bodys[i].x = this.bodys[i - 1].x;
                this.bodys[i].y = this.bodys[i - 1].y;
            }
            switch (this.direct) {
                case 'left':
                    this.bodys[0].x -= 1
                    break;
                case 'right':
                    this.bodys[0].x += 1
                    break;
                case 'up':
                    this.bodys[0].y -= 1
                    break;
                case 'down':
                    this.bodys[0].y += 1
                    break;
                    default:
                        break;
            }
            this.hasEat();
            if(!this.hasDie()){
                this.show();
            }
        }
        Snake.prototype.hasDie = function(){
            let header = this.bodys[0];
            if(header.x < 0 || header.x > 39 || header.y < 0 || header.y >29){
                clearInterval(timer);
                alert('小垃圾你输了');
                return true;
            }
            return false;
        }
        Snake.prototype.hasEat = function(){
            if(this.bodys[0].x == food.x && this.bodys[0].y == food.y){
                let lastIndex = this.bodys.length -1;
                this.bodys.push({
                    x:this.bodys[lastIndex].x,
                    y:this.bodys[lastIndex].y,
                    backgroundImage:this.bodys[lastIndex].backgroundImage,
                    dom:null
                })
                food.show();
            }
        }
        let snake = new Snake;
        snake.show();
        let timer = setInterval(function(){
            snake.move();
        },100);
        document.onkeydown = function (event) {
        switch (event.keyCode) {
            case 37:
                snake.direct = 'left';
                break;
            case 38:
                snake.direct = 'up';
                break;
            case 39:
                snake.direct = 'right';
                break;
            case 40:
                snake.direct = 'down';
                break;
            default:
                break;
        }
    }
    </script>
</body>

</html>